<template>
  <div class="app-container info" v-if="list">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12">
        <el-card class="box-card">
          <div slot="header">商户信息</div>
          <div style="font-size: 14px;">
            <span
              style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;"
              >商户名称</span
            >
            <span v-if="list.shopping_name">{{ list.shopping_name }}</span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span
              style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;vertical-align: top;"
              >商户logo</span
            >
            <el-image
              style="width: 100px; height: 100px"
              :src="list.logo"
              :preview-src-list="[list.logo]"
            >
            </el-image>
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span
              style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;"
              >保证金金额</span
            >
            <b style="margin-right: 20px;">{{ list.security_deposit }}</b>
            <el-link
              type="danger"
              :underline="false"
              @click="dialogVisible = true"
              >充值</el-link
            >
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span
              style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;"
              >企业名称</span
            >
            <span>{{ list.company_name }}</span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span
              style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;"
              >社会信用代码</span
            >
            <span>{{ list.credit_code }}</span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span
              style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;"
              >所在地</span
            >
            <span
              >{{
                list.company_province && list.company_province.length > 0
                  ? list.company_province[0].title
                  : ""
              }}{{
                list.company_city && list.company_city.length > 0
                  ? list.company_city[0].title
                  : ""
              }}{{
                list.company_country && list.company_country.length > 0
                  ? list.company_country[0].title
                  : ""
              }}{{
                list.company_area && list.company_area.legth > 0
                  ? list.company_area[0].title
                  : ""
              }}</span
            >
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span
              style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;"
              >入驻时间</span
            >
            <span>{{ list.created_at }}</span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;margin-bottom: 50px;">
            <span
              style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;"
              >商户状态</span
            >
            <span>{{
              list.audit_status == 0
                ? "待审核"
                : list.audit_status == 1
                ? "审核通过"
                : list.audit_status == 2
                ? "不通过"
                : ""
            }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-card class="box-card">
          <div slot="header">申请信息</div>
          <div style="font-size: 14px;">
            <span
              style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;"
              >申请会员</span
            >
            <span>{{ list.company_user }}</span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span
              style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;vertical-align: top;"
              >营业执照</span
            >
            <el-image
              style="width: 100px; height: 100px"
              :src="list.business_image"
              :preview-src-list="[list.business_image]"
            >
            </el-image>
          </div>
          <div style="font-size: 14px;margin-top: 10px;margin-bottom: 93px;">
            <span
              style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;vertical-align: top;"
              >法人身份证</span
            >
            <el-image
              style="width: 100px; height: 100px"
              :src="list.company_user_header"
              :preview-src-list="[list.company_user_header]"
            >
            </el-image>
            <el-image
              style="width: 100px; height: 100px;margin-left: 10px;"
              :src="list.company_user_back"
              :preview-src-list="[list.company_user_back]"
            >
            </el-image>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header">交易信息</div>
          <el-row>
            <el-col :span="4">
              <div style="padding: 30px 0;text-align: center">
                <div style="margin-bottom: 20px;">成交金额</div>
                <b>{{ list.deal_msg.deal_money }}</b>
              </div>
            </el-col>
            <el-col :span="4">
              <div style="padding: 30px 0;text-align: center">
                <div style="margin-bottom: 20px;">可结算金额</div>
                <b>{{ list.deal_msg.can_settle_money }}</b>
              </div>
            </el-col>
            <el-col :span="4">
              <div style="padding: 30px 0;text-align: center">
                <div style="margin-bottom: 20px;">结算中金额</div>
                <b>{{ list.deal_msg.in_settle_money }}</b>
              </div>
            </el-col>
            <el-col :span="4">
              <div style="padding: 30px 0;text-align: center">
                <div style="margin-bottom: 20px;">已结算金额</div>
                <b>{{ list.deal_msg.already_settle_money }}</b>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <el-col :span="24">
        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header">拍品信息</div>
          <el-row>
            <el-col :xs="12" :span="3">
              <div
                style="padding: 30px 0;text-align: center;border-right: 1px solid #dcdcdc;"
              >
                <div style="margin-bottom: 20px;">全部拍品</div>
                <b>{{ list.product_msg.all_pro }}</b>
              </div>
            </el-col>
            <el-col :xs="12" :span="3">
              <div style="padding: 30px 0;text-align: center">
                <div style="margin-bottom: 20px;">上传审核</div>
                <b>{{ list.product_msg.to_approve_pro }}</b>
              </div>
            </el-col>
            <el-col :xs="12" :span="3">
              <div style="margin: 30px 0;text-align: center;">
                <div style="margin-bottom: 20px;">上拍审核</div>
                <b>{{ list.product_msg.no_pass_pro }}</b>
              </div>
            </el-col>
            <el-col :xs="12" :span="3">
              <div style="padding: 30px 0;text-align: center">
                <div style="margin-bottom: 20px;">拍卖中</div>
                <b>{{ list.product_msg.in_auction_pro }}</b>
              </div>
            </el-col>
            <el-col :xs="12" :span="3">
              <div style="padding: 30px 0;text-align: center">
                <div style="margin-bottom: 20px;">已流拍</div>
                <b>{{ list.product_msg.abortive_auction_pro }}</b>
              </div>
            </el-col>
            <el-col :xs="12" :span="3">
              <div style="padding: 30px 0;text-align: center">
                <div style="margin-bottom: 20px;">已截拍</div>
                <b>{{ list.product_msg.section_auction_pro }}</b>
              </div>
            </el-col>
            <el-col :xs="12" :span="3">
              <div style="padding: 30px 0;text-align: center">
                <div style="margin-bottom: 20px;">已关闭</div>
                <b>{{ list.product_msg.close_pro }}</b>
              </div>
            </el-col>
            <el-col :xs="12" :span="3">
              <div style="padding: 30px 0;text-align: center">
                <div style="margin-bottom: 20px;">锁定中</div>
                <b>{{ list.product_msg.lock_pro }}</b>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <el-col :span="24">
        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header">订单信息</div>
          <el-row>
            <el-col :xs="12" :span="3">
              <div style="padding: 30px 0;text-align: center">
                <div style="margin-bottom: 20px;">待付款</div>
                <b>{{ list.order_msg.to_pay_order }}</b>
              </div>
            </el-col>
            <el-col :xs="12" :span="3">
              <div style="padding: 30px 0;text-align: center;">
                <div style="margin-bottom: 20px;">待提货/续拍</div>
                <b>{{ list.order_msg.pick_order }}</b>
              </div>
            </el-col>
            <el-col :xs="12" :span="3">
              <div style="padding: 30px 0;text-align: center">
                <div style="margin-bottom: 20px;">已续拍1</div>
                <b>{{ list.order_msg.continue1_order }}</b>
              </div>
            </el-col>
            <el-col :xs="12" :span="4">
              <div style="padding: 30px 0;text-align: center">
                <div style="margin-bottom: 20px;">已续拍2(平台收货)</div>
                <b>{{ list.order_msg.continue2_order }}</b>
              </div>
            </el-col>
            <el-col :xs="12" :span="3">
              <div style="padding: 30px 0;text-align: center">
                <div style="margin-bottom: 20px;">已关闭</div>
                <b>{{ list.order_msg.close_order }}</b>
              </div>
            </el-col>
            <el-col :xs="12" :span="3">
              <div style="padding: 30px 0;text-align: center">
                <div style="margin-bottom: 20px;">待发货</div>
                <b>{{ list.order_msg.send_order }}</b>
              </div>
            </el-col>
            <el-col :xs="12" :span="3">
              <div style="padding: 30px 0;text-align: center">
                <div style="margin-bottom: 20px;">待收货</div>
                <b>{{ list.order_msg.accept_order }}</b>
              </div>
            </el-col>
            <el-col :xs="12" :span="3">
              <div style="padding: 30px 0;text-align: center">
                <div style="margin-bottom: 20px;">已完成</div>
                <b>{{ list.order_msg.complete_order }}</b>
              </div>
            </el-col>
            <el-col :xs="12" :span="3">
              <div style="padding: 30px 0;text-align: center">
                <div style="margin-bottom: 20px;">退款中</div>
                <b>{{ list.order_msg.activist_order }}</b>
              </div>
            </el-col>
            <el-col :xs="12" :span="3">
              <div style="padding: 30px 0;text-align: center">
                <div style="margin-bottom: 20px;">维权完成</div>
                <b>{{ list.order_msg.return_order }}</b>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog
      title="充值"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="40%"
    >
      <el-input
        v-model="topUpNumber"
        type="number"
        class="input-with-select input-spin"
      >
        <!--   <el-select slot="prepend" v-model="topUpValue">
          <el-option label="+" value="+" />
          <el-option label="-" value="-" />
        </el-select> -->
      </el-input>
      <div style="margin-top: 40px;text-align: center;">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="danger" @click="handleSubmit">确认充值</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getShoppingDetail, updateShopping } from "@/api/common";

export default {
  name: "merchantsInfo",
  data() {
    return {
      tableKey: 0,
      list: null,
      listLoading: true,
      dialogVisible: false,
      topUpNumber: undefined,
      topUpValue: "+"
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 充值
    handleSubmit() {
      if (!this.topUpNumber || (this.topUpNumber && this.topUpNumber <= 0)) {
        this.$message.error("请输入大于0的数");
        return false;
      }
      let security_deposit = 0;
      if (this.list.security_deposit > 0) {
        security_deposit =
          Number(this.list.security_deposit) + Number(this.topUpNumber);
      } else {
        security_deposit = Number(this.topUpNumber);
      }
      updateShopping(this.$route.params.id, { security_deposit: security_deposit+''}).then(() => {
        this.$notify({
          title: "成功",
          message: "充值成功",
          type: "success",
          duration: 2000
        });
        this.dialogVisible = false;
        this.getList();
      });
    },
    getList() {
      getShoppingDetail(this.$route.params.id).then(res => {
        this.list = res.data;
      });
    }
  }
};
</script>

<style>
.info .el-select .el-input {
  width: 100px;
}
</style>
